<template>
  <el-select
      v-model="selectedValue"
      clearable
      filterable
      @change="handleChange"
      :placeholder="placeholder"
      :disabled="disabled"
  >
    <el-option
        v-for="item in dataList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
    />
  </el-select>
</template>

<script setup>
import {ref, watch} from 'vue';
import {SupplierApi} from '@/api/erp/purchase/supplier'

const props = defineProps({
  // 绑定的值（v-model）
  modelValue: {
    type: [Number, String, null],
    default: null
  },
  // 占位符文本
  placeholder: {
    type: String,
    default: '请选择供应商'
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  }
});

const dataList = ref([]) // 供应商列表
const selectedValue = ref(props.modelValue); // 初始值同步父组件的 modelValue

// 定义组件触发的事件
const emit = defineEmits(['update:modelValue', 'select']);

// 处理v-model双向绑定
watch(
    () => props.modelValue,
    (newVal) => {
      selectedValue.value = newVal;
    },
    {immediate: true}
);

// 处理选择变化事件
const handleChange = (val) => {
  emit('update:modelValue', selectedValue.value);

  const selectedRow = dataList.value.find(
      item => item.id === selectedValue.value
  );
  if (selectedRow) {
    emit('select', selectedRow);
  } else {
    emit('select', null);
  }
};


onMounted(async () => {
  let queryForm = {
    pageSize: 1000
  }

  let data = await SupplierApi.getSupplierPage(queryForm)
  dataList.value = data.list
})
</script>
<style scoped>
/* 可根据需要添加组件样式 */
</style>